<template>
	<view>
		<van-button type="default">默认按钮</van-button>
		<van-button type="primary">主要按钮</van-button>
		<van-button type="info">信息按钮</van-button>
		<van-button type="warning">警告按钮</van-button>
		<van-button type="danger">危险按钮</van-button>
		<view>
			<van-cell-group>
				<van-cell title="单元格" value="内容" />
				<van-cell title="单元格" value="内容" label="描述信息" />
			</van-cell-group>
		</view>
		<view>
			<van-icon name="chat" dot />
			<van-icon name="chat" info="9" />
			<van-icon name="chat" info="99+" />
		</view>
		<view><van-checkbox v-model="checked">复选框</van-checkbox></view>
		<van-button @touchstart.stop="show = true">弹出默认键盘</van-button>
		<van-number-keyboard :show="show" extra-key="." close-button-text="完成" @blur="show = false" @input="onInput" @delete="onDelete" />
		<view><van-slider v-model="value" @change="onChange" /></view>
		<view><van-uploader :after-read="afterRead" /></view>
		<view>
			<van-uploader v-model="fileList" multiple />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: true,
			show: true,
			value: 50,
			 fileList: [
			        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
			        // Uploader 根据文件后缀来判断是否为图片文件
			        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
			        { url: 'https://cloud-image', isImage: true },
			      ],
		};
	},
	methods: {
		onInput(value) {
			Toast(value);
		},
		onChange(value) {
			Toast('当前值：' + value);
		},
		onDelete() {
			Toast('删除');
		},
		afterRead(file) {
			// 此时可以自行将文件上传至服务器
			console.log(file);
		}
	}
};
</script>

<style></style>
